<template>
  <div style="min-height: 1000px">
    <div style="background-color: #fdfcfc; padding: 40px 0">
      <div style="width: 50%; margin: 0 auto; display: flex; grid-gap: 40px">
        <img :src="data.playlistData.img" alt="" style="width: 250px; height: 250px; border-radius: 5px">
        <div>
          <div style="font-size: 20px; font-weight: 300">{{ data.playlistData.name }}</div>
          <div style="display: flex; align-items: center; grid-gap: 5px; margin-top: 10px">
            <el-icon size="16"><Avatar /></el-icon>
            <div style="font-size: 16px">{{ data.playlistData.userName }}</div>
          </div>
          <div style="margin-top: 10px; color: #666666">热度：🔥{{ data.playlistData.hot }}</div>
          <div style="margin-top: 10px; color: #666666">创建时间：{{ data.playlistData.time }}</div>
          <div style="margin-top: 10px; color: #666666" class="line3">简介：{{ data.playlistData.description }}</div>
          <div style="margin-top: 20px">
            <el-button type="success" :disabled="!data.songData.length" @click="playAll"><el-icon><VideoPlay /></el-icon><span style="margin-left: 5px">加入播放列表</span></el-button>
            <span v-if="data.user.id !== data.playlistData.userId" style="margin-left: 5px">
              <el-button type="warning" v-if="!data.collectData.length" @click="collectPlaylist"><el-icon><Star /></el-icon><span style="margin-left: 5px">收藏歌单</span></el-button>
              <el-button type="danger" v-else @click="disCollectPlaylist"><el-icon><StarFilled /></el-icon><span style="margin-left: 5px">取消收藏</span></el-button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 50%; margin: 50px auto">
      <div style="font-size: 20px; margin-bottom: 20px">曲目列表（{{ data.songData.length }}）</div>
      <el-table :data="data.songData" stripe>
        <el-table-column prop="" label="名称" width="200" show-overflow-tooltip>
          <template v-slot="scope">
            <a :href="'/front/songDetail?id=' + scope.row.id" style="color: #1357be">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="发行时间" width="120"></el-table-column>
        <el-table-column prop="categoryName" label="所属分类" show-overflow-tooltip></el-table-column>
        <el-table-column prop="duration" label="时长" show-overflow-tooltip></el-table-column>
        <el-table-column prop="" label="热度">
          <template v-slot="scope">🔥{{ scope.row.hot }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="scope">
            <el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MusicPlayer :musicList="data.songData" v-if="data.songData?.length && data.playFlag" />
  </div>

</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";
import MusicPlayer from "@/views/components/MusicPlayer.vue";
import {Delete, Edit} from "@element-plus/icons-vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  playlistId: router.currentRoute.value.query.id,
  playlistData: {},
  collectData: [],
  songData: [],
  playFlag: false,
})

const playAll = () => {
  data.playFlag = true
}

const del = (id) => {
  ElMessageBox.confirm('您确定将歌曲从该歌单中移除吗？', '移除确认', { type: 'warning' }).then(res => {
    request.post('/playlistItem/deleteSong', {
      userId: data.user.id,
      playlistId: data.playlistId,
      songId: id,
    }).then(res => {
      if (res.code === '200') {
        ElMessage.success("移除成功")
        loadSongs()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.error(err)
  })
}

const loadPlaylist = () => {
  request.get('/playlist/selectById/' + data.playlistId).then(res => {
    if (res.code === '200') {
      data.playlistData = res.data
      data.playlistData.hot = data.playlistData.hot + 1
      request.put('/playlist/update', data.playlistData)
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadPlaylist()

const loadSongs = () => {
  request.get('/playlistItem/selectAllSongs', {
    params: {
      playlistId: data.playlistId,
    }
  }).then(res => {
    if (res.code === '200') {
      data.songData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadSongs()

const collectPlaylist = () => {
  request.post('/collect/add', {
    relId: data.playlistId,
    type: 'PLAYLIST'
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('收藏成功')
      loadCollect()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const disCollectPlaylist = () => {
  request.delete('/collect/delete/' + data.collectData[0].id).then(res => {
    if (res.code === '200') {
      ElMessage.success('取消成功')
      loadCollect()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const loadCollect = () => {
  request.get('/collect/selectAll', {
    params: {
      userId: data.user.id,
      relId: data.playlistId,
      type: 'PLAYLIST'
    }
  }).then(res => {
    if (res.code === '200') {
      data.collectData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadCollect()

</script>